$(document).ready(function () {

    var laydate = layui.laydate;

    laydate.render({
        elem: '#choose-month'
        , type: 'month'
        , value: getMonth()
        , done: function (value, date, endDate) {
            curMonth = value;
            deviceTrendTable()
        }
    });


    $('.overview-tab>div').eq(0).click()
    trendChart()
    queryCount()
})

var curType = 1, curMonth = getMonth();

queryCount = () => {
    AjaxRequest('/data/alarm/type/count?type=3&begin=' + new Date().getFullYear(), callBack)

    function callBack(result) {
        if (result.status == 200) {

            for (const key in result.result) {
                $('#count-' + key).html(result.result[key])

            }

        }
    }
}

trendChart = () => {

    AjaxRequest('/data/alarm/type/trend/count?type=3&begin=' + new Date().getFullYear(), callBack)

    function callBack(result) {
        if (result.status == 200) {


            var ntu = [], area = [];
            result.result.forEach(e => {
                ntu.push(e.ntu)
                area.push(e.area)
            });


            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['悬浮物', '浊度'],
                    top: '0%',
                    right: '5%',
                    icon: 'rect',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '15%',
                    bottom: '5%',
                    containLabel: true
                },
                //	    toolbox: {
                //	        feature: {
                //	            saveAsImage: {}
                //	        }
                //	    },
                xAxis: {
                    type: 'category',
                    boundaryGap: true, //坐标轴两边留白
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLabel: { //坐标轴刻度标签的相关设置。
                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                        //	margin:15,
                        textStyle: {
                            color: '#eeeeee',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        },
                        formatter: function (params) {
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 4; //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }

                            } else {
                                newParamsName = params;
                            }
                            return newParamsName
                        },
                        //rotate:50,
                    },
                    axisTick: { //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: { //坐标轴轴线相关设置
                        lineStyle: {
                            color: '#427680',
                            width: 2
                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                        lineStyle: {
                            color: '#E5E9ED',
                            // 	opacity:0.1
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    // min: 0,
                    // max: 400,
                    // splitNumber: 5,
                    axisLabel: {
                        textStyle: {
                            color: '#5787C0',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#427680',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'rgba(56, 117, 174, 0.5)'
                            // 	opacity:0.1
                        }
                    }

                }],
                series: [{
                    name: '悬浮物',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 1,
                                color: 'rgba(136, 223, 241, 1)'
                            }, {
                                offset: 0,
                                color: 'rgba(80, 187, 223, 1)'
                            }]),
                            shadowColor: '#69CBE7',
                            shadowBlur: 20,
                            borderColor: '#69CBE7',
                            borderWidth: 2,
                            lineStyle: {
                                color: "#69CBE7",
                                width: 2
                            },
                        }
                    },
                    data: area
                }, {
                    name: '浊度',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 1,
                                color: '#FFCFAD'
                            }, {
                                offset: 0,
                                color: '#FF8818'
                            }]),
                            shadowColor: '#FFA85B',
                            shadowBlur: 20,
                            borderColor: '#FFA85B',
                            borderWidth: 2,
                            lineStyle: {
                                color: "#FFA85B",
                                width: 2
                            },
                        }
                    },
                    data: ntu
                },]
            };

            var chart = echarts.init(document.getElementById('trend-chart'));
            chart.setOption(option)

        }
    }

}


deviceTrendTable = () => {
    AjaxRequest('/data/alarm/device/trend/count?deviceType=' + curType + '&time=' + curMonth, callBack)

    function callBack(result) {
        if (result.status == 200) {
            var dateArr = [];//表头时间数组

            var data = result.result;
            var clock = 0;       //防止多次循环时间表头
            var dataArr = [];    //报警数据
            var addressArr = []; //第一列地址栏
            var str = '';        //拼接页面元素

            for (const key in data) {
                addressArr.push(key)

                dataArr.push(data[key])
            }

            dataArr.forEach((e, i) => {

                str = str + `<div class="table-item">
                                <div>${addressArr[i]}</div>`

                if (clock == 0) {
                    for (const key in e) {
                        dateArr.push(key)
                        str = str + `<div>${e[key].alarm > 0 ? `<span class="alarm-span">${e[key].alarm}</span>` : e[key].alarm}</div>`
                    }
                    clock++

                } else {
                    for (const key in e) {
                        str = str + `<div>${e[key].alarm > 0 ? `<span class="alarm-span">${e[key].alarm}</span>` : e[key].alarm}</div>`
                    }
                }

                str = str + '</div>'
            });
            $('.table-th').empty().append(dateArr.reduce((x, y) => {

                return x + `<div>${y.substring(5)}</div>`

            }, '<div>安装地址</div>'))

            $('#table-list').empty().append(str);

        }
    }
}


$('.overview-tab>div').click(function (e) {

    $(e.currentTarget).addClass('active').siblings().removeClass('active');
    var type = $(e.currentTarget).data().type;
    curType = type;
    deviceTrendTable()

})



//导出
$("#export").click(function () {
    $("input[name=sessionId]").val(JSON.parse(localStorage.getItem('sessionId')));
    $("#time").val(curMonth);
    $("#deviceType").val(curType);
    $('#exportForm').submit();
})
